<template>
  <div class="index">
    <div class="wrapper">
      <div class="container">
<!--        轮播图和侧边栏-->
        <el-row type="flex" justify="space-between">
          <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
            <swiper :options="swiperOption" class="swiper">
              <!-- slides -->
              <swiper-slide v-for="item in imgList" :key="item.id">
                <img :src="item.img_url" alt="" style="width: 100%">
              </swiper-slide>
              <!-- Optional controls -->
            </swiper>
          </el-col>
          <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
            <div class="board">
              <div class="board-item" v-for="item in boardList" :key="item.id">
                <img :src="item.img_url" alt="">
              </div>
            </div>
            <div class="qrcode" @mouseenter="concleShowQrcode" @mouseleave="showQrcode = false">
              <div class="model-Qrcode" v-show="showQrcode">
                <img src="../../public/qrcode.png" alt="">
              </div>
              <img src="../../public/qrcode.png" alt="">
              <div class="info">
                <div class="title">下载简书手机App<i class="iconfont ic-link"></i></div>
                <div class="description">随时随地发现和创作内容</div>
              </div>
            </div>
          </el-col>
        </el-row>
<!--        文章列表-->
        <el-row type="flex" justify="space-between">
          <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
            <ArticleList :article-list="articleList"></ArticleList>
            <div class="scroll-more" v-infinite-scroll="loadMore"
                 :infinite-scroll-disabled="busy" infinite-scroll-distance="10" v-show="!busy">
              <img src="../../public/loading-more.svg" alt="">
            </div>
          </el-col>
          <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
            <div class="recommend-author">
              <div class="title">
                推荐作者
                <a href="" class="replace">换一批</a>
              </div>
              <ul class="author-list">
                <li class="author-item" v-for="item3 in authorList" :key="item3.id">
                  <div class="author-info clearfix">
                    <a href="" class="author-img"><img :src="item3.author_img" alt=""></a>
                    <a href="" class="author-name">{{item3.author_name}}</a>
                    <p class="author-message">{{item3.author_message}}</p>
                  </div>
                  <a class="follow">
                      +关注
                  </a>
                </li>
              </ul>
              <a href="" class="see-more">查看更多 ></a>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import ArticleList from '../components/ArticleList'
import 'swiper/dist/css/swiper.css'
import infiniteScroll from 'vue-infinite-scroll'
export default {
  name: 'Index',
  data () {
    return {
      // 轮播图列表
      imgList: [],
      // 侧边栏列表
      boardList: [],
      // 二维码显现
      showQrcode: false,
      // note信息
      articleList: [],
      // 作者信息
      authorList: [],
      // 控制无线滚动
      busy: true,
      swiperOption: {
        // 所有的参数同 swiper 官方 api 参数
        autoplay: true,
        loop: true
      }
    }
  },
  directives: {
    infiniteScroll
  },
  components: { // 模板加载
    swiper,
    swiperSlide,
    ArticleList
  },
  computed: {// 计算属性

  },
  mounted () { // 挂载
    this.getImg()
  },
  methods: { // 方法
    getImg () {
      this.axios.get('/api/swiper-img.json').then(res => {
        this.imgList = res.swiperImg
        this.boardList = res.boardList
        this.articleList = res.articleList
        this.authorList = res.authorList
        // console.log(res)
      })
    },
    loadMore () {
      this.busy = true
      setTimeout(() => {
        const c = this.articleList
        this.articleList.push(...c)
        this.busy = false
      }, 1000)
    },
    concleShowQrcode () {
      this.showQrcode = true
    }
  }
}
</script>

<style lang="scss">
  .index {
    .wrapper {
      .container {
        margin: 30px auto 0;
        .scroll-more{
          text-align: center;
        }
        .swiper{
          border-radius: 5px;
        }
        .board{
          margin-top: -5px;
          .board-item{
            width: 100%;
            height: 50px;
            margin-top: 10px;
            img{
              width: 100%;
            }
            &:first-child{
              margin-top: 0;
            }
          }
        }
        .qrcode{
          position: relative;
          margin-top: 10px;
          padding: 10px 22px;
          width: 100%;
          border: 1px solid #f0f0f0;
          box-sizing: border-box;
          border-radius: 6px;
          .model-Qrcode{
            background-color: #fff;
            position: absolute;
            padding: 10px;
            top: -182px;
            left: 70px;
            box-shadow: 0 5px 20px rgba(0,0,0,.1);
            img{
              width: 160px;
              height: 160px;
            }
          }
          img {
            width: 60px;
            height: 60px;
            opacity: 0.85;
            vertical-align: middle;
          }
          .info{
            display: inline-block;
            margin-left: 10px;
            vertical-align: middle;
            .title{
              font-size: 15px;
              color: #333;
            }
            .description{
              margin-top: 4px;
              font-size: 13px;
              color: #999;
            }
          }
        }
      }
      .recommend-author{
        margin-top: 30px;
        .title, .replace{
          font-size: 14px;
          color: #969696;
        }
        .replace{
          float: right;
          display: inline-block;
        }
        .author-list{
          .author-item{
            margin-top: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .author-info{
              .author-name{
                display: block;
                margin: 10px 0;
                font-size: 14px;
                white-space: nowrap;
              }
              .author-message{
                font-size: 12px;
                color: #969696;
                white-space: nowrap;
              }
              .author-img{
                float: left;
                display: block;
                width: 48px;
                height: 48px;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 10px;
                img{
                  vertical-align: middle;
                  width: 100%;
                  height: 100%;
                }
              }
            }
            .follow{
              font-size: 13px;
              color: #42c02e;
            }
          }
        }
        .see-more{
          margin-top: 15px;
          display: block;
          text-align: center;
          background-color: #f7f7f7;
          border: 1px solid #dcdcdc;
          border-radius: 4px;
          padding: 7px 7px 7px 12px;
          width: 100%;
          font-size: 13px;
          color: #787878;

        }
      }
    }
  }
</style>
